<template>
    <div>
        <!--头部-->
        <el-header>
            <div class="logo-header-box">
                <div class="logo-header"></div>
                <span>阿燕仓库管理系统</span>
            </div>
            <el-menu router
                    :default-active="headNav"
                    class="el-menu-demo"
                    mode="horizontal"
                    @select="handleSelect"
                    background-color="#42b983"
                    text-color="#fff"
                    active-text-color="#ffd04b">
                <!--<el-menu-item index="/goodsHome">商品管理</el-menu-item>-->
                <!--<el-menu-item index="/stock">库存管理</el-menu-item>-->
                <!--<el-menu-item index="4">订单管理</el-menu-item>-->
                <el-menu-item v-for="(item, i) in userNav" :key="i" :index="item.url">{{item.menuName}}</el-menu-item>
            </el-menu>

            <!--头像-->
            <div class="info-box">
                <!--下拉组件-->
                <el-dropdown @command="handleCommand">
                    <!--<el-button @click="logout"> 退出</el-button>-->
                    <!--头像-->
                    <div class="head-img"></div>
                    <!--下拉菜单-->
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item icon="el-icon-user" command="message">我的信息</el-dropdown-item>
                        <el-dropdown-item icon="el-icon-switch-button" command="logout">退出系统</el-dropdown-item>
                    </el-dropdown-menu><!--/ 下拉菜单-->
                </el-dropdown><!--/ 下拉组件-->
                <span class="user-name"> {{userInfo.userName}} </span>
            </div>
        </el-header><!--/ 头部-->
    </div>

</template>

<script>
import API from '@/api/api'
export default {
    name: "HeaderNav",
    data() {
        return{
            headNav: '',
            userNav: [],
            userInfo: {
                userName: '',
            },

        }
    },
    created() {
        // sessionStorage.setItem("headNav", '/home');
        let temp = sessionStorage.getItem("headNav");
        let userInfo = sessionStorage.getItem("userInfo");
        console.log(userInfo, 'userInfo-------=-=-=-==----');
        if (temp) {
            this.headNav = temp;
        }
        if (userInfo) {
            this.userInfo = JSON.parse(userInfo);
        }

        let item = sessionStorage.getItem("userNav");
        this.userNav = JSON.parse(item);

    },
    methods: {
        // 下拉菜单处理
        handleCommand(val) {
            if (val === 'logout') {
                this.logout();
            }
            if (val === 'message') {
                this.message();
            }
        },
        // 退出
        logout() {
            // 发送退出请求
            this.$post(API.auth.logout, {}).then( res => {
                let data = res.data;
                if (data.success) {
                    sessionStorage.clear();
                    this.$message.closeAll();
                    this.$message.success("你已退出系统!");
                    this.$router.push('/login');
                } else {
                    this.$message.closeAll();
                    this.$message.error({
                        showClose: true,
                        message: "退出失败!"
                    })
                }
            }).catch( err => {
                this.$message.closeAll();
                this.$message.error({
                    showClose: true,
                    message: "退出失败!"
                })
            });

        },
        // 点击头部菜单栏
        handleSelect(key, keyPath) {
            console.log(key, keyPath);
           sessionStorage.setItem("headNav", key);
        },
        // 我的信息 --
        message() {
            let userInfo = this.$user;
            this.$message({
                showClose: true,
                message: "你好! " + userInfo.userName + "!"
            })
        }

    }
}
</script>

<style lang="scss" scoped>
    /*头部*/
    .el-header {
        padding-left: 10px;
        padding-right: 10px;
        background-color: #42b983;
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-content: flex-end;
    }

    /*导航栏logo*/
    .logo-header-box {
        display: flex;
        align-items: center;
        margin-right: 8px;
        /*导航栏logo*/
        .logo-header {
            height: 70px;
            width: 70px;
            background-size: cover;
            background-image: url("../assets/ayan-logo.png");
        }
        >span {
            padding-left: 5px;
            font-size: 20px;
            font-weight: bolder;
        }
    }

    /*头像信息box*/
    .info-box {
        display: flex;
        align-items: flex-end;
        margin-right: 8px;
        /*头像*/
        .head-img {
            height: 56px;
            width: 56px;
            border-radius: 50%;
            background-color: #dbe6a2;
            background-image: url("../assets/user.jpg");
            background-size: cover;
            cursor: pointer;
        }
        .user-name {
            padding-left: 5px;
            height: 25px;
            /*background-color: orange;*/
            display: inline-block;
        }
    }

    /*顶部导航栏*/
    .el-menu-demo {
        /*background-color: #42b983;*/
    }
</style>
